// import React, { useEffect } from 'react';
// React 是一个基于组件的框架，我们可以使用 React 的生命周期函数（如 useEffect）来监听和处理 LocalStorage 的变化。
// useEffect 是 React 的一个 Hook，用来处理副作用，在这里我们用它来注册和清除事件监听器。
// 我们手动触发了 StorageEvent，以便在同一页面中监听 LocalStorage 的变化。
// const LocalStorageListener = () => {
//     useEffect(() => {
//         // 定义 storage 事件监听器
//         const handleStorageChange = (event) => {
//             if (event.key === 'myKey') {
//                 console.log('Detected localStorage change:', event.newValue);
//             }
//         };

//         // 添加监听器
//         window.addEventListener('storage', handleStorageChange);

//         // 模拟触发自定义的 StorageEvent
//         const triggerCustomStorageEvent = () => {
//             const storageEvent = new StorageEvent('storage', {
//                 key: 'myKey',
//                 newValue: 'newValue',
//                 url: window.location.href,
//             });
//             window.dispatchEvent(storageEvent);
//         };

//         // 组件卸载时移除监听器
//         return () => {
//             window.removeEventListener('storage', handleStorageChange);
//         };
//     }, []); // 空依赖数组表示该 effect 只会在组件挂载时运行

//     return (
//         <div>
//             <button onClick={() => localStorage.setItem('myKey', 'newValue')}>
//                 修改 localStorage
//             </button>
//             <button onClick={() => window.dispatchEvent(new StorageEvent('storage', {
//                 key: 'myKey',
//                 newValue: localStorage.getItem('myKey'),
//                 url: window.location.href,
//             }))}>
//                 手动触发 StorageEvent
//             </button>
//         </div>
//     );
// };

// 在 React 中提取为 Hook
import { useEffect } from 'react';

const useLocalStorageListener = (key, callback) => {
    useEffect(() => {
        const handleStorageChange = (event) => {
            if (event.key === key) {
                callback(event.newValue);
            }
        };

        window.addEventListener('storage', handleStorageChange);

        return () => {
            window.removeEventListener('storage', handleStorageChange);
        };
    }, [key, callback]);
};

export default useLocalStorageListener;